<template>
  <div v-if="isShow">
    <!-- 循环生成分类 -->
    <div  v-for="n in categorys" class="category-box-div">
      <span class="svg-box-span">
        <svg viewBox="0 0 24 24">
          <path
              d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z">
          </path>
        </svg>
      </span>
      <div class="category-name-div">
        <span class="category-name-span">
          {{n.name}}
        </span>
        <span class="category-tip-span">
          已有商品个数
        </span>
        <span class="category-num-span">
          500
        </span>
      </div>
    </div>

    <!-- 新增分类 -->
    <div class="category-box-div" @click="getCategoryName">
      <span class="svg-add-box-span">
        <svg viewBox="0 0 24 24">
          <path
              d="M7,18 C5.9,18 5.01,18.9 5.01,20 C5.01,21.1 5.9,22 7,22 C8.1,22 9,21.1 9,20 C9,18.9 8.1,18 7,18 Z M1,2 L1,4 L3,4 L6.6,11.59 L5.25,14.04 C5.09,14.32 5,14.65 5,15 C5,16.1 5.9,17 7,17 L19,17 L19,15 L7.42,15 C7.28,15 7.17,14.89 7.17,14.75 L7.2,14.63 L8.1,13 L15.55,13 C16.3,13 16.96,12.59 17.3,11.97 L20.88,5.48 C20.96,5.34 21,5.17 21,5 C21,4.45 20.55,4 20,4 L5.21,4 L4.27,2 L1,2 Z M17,18 C15.9,18 15.01,18.9 15.01,20 C15.01,21.1 15.9,22 17,22 C18.1,22 19,21.1 19,20 C19,18.9 18.1,18 17,18 Z"
              id="Shape" fill="#000000" fill-rule="nonzero">
          </path>
        </svg>
      </span>
      <div class="category-name-div">
        <span class="category-name-span">
          &nbsp;
        </span>
        <span class="category-add-tip-span">
          新增分类
        </span>
        <span class="category-num-span">
          &nbsp;
        </span>
      </div>
    </div>
  </div>


</template>

<script>
module.exports = {
  data() {
    return {
      isShow:true,
      categorys: {}
    };
  },
  mounted:function(){
    axios.get("/categorylist").then((response) => {
      this.categorys = response.data;

    });
  },
  methods: {
    getCategoryName() {
      var categoryName = prompt("请输入新的分类名：");
      if (categoryName != null && categoryName != "") {

        axios.get("/categoryadd", {
          // params : 代表的是需要传递给后端的数据的对象
          params: {
            categoryName: categoryName,
          }
        }).then((response) => {
          // 后端传递给前端的数据在 response.data 中
          if(response.data == "OK") {
            alert("添加成功！")
          }
          this.isShow = false;
          this.isShow = true;
        });
      } else {
        alert("分类名为空，添加失败！")
      }
    }
  }
}
</script>

<style scoped>
.svg-box-span {
  float: left;
  height: 90px;
  width: 90px;
  text-align: center;
  background-color: rgb(216, 27, 96);
}

.svg-add-box-span {
  float: left;
  height: 90px;
  width: 90px;
  text-align: center;
  background-color: #12ac33;
}

.category-box-div {
  color: rgba(0, 0, 0, 0.87);
  background-color: rgb(255, 255, 255);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  border-radius: 2px;
  display: inline-block;
  width: 244px;
  margin-right: 50px;
  margin-bottom: 35px;
}

svg {
  display: inline-block;
  color: rgba(0, 0, 0, 0.87);
  fill: rgb(255, 255, 255);
  height: 48px;
  width: 48px;
  user-select: none;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  margin-top: 20px;
  max-width: 100%;
}

.category-name-div {
  padding: 5px 10px;
  margin-left: 90px;
  height: 80px;
}

.category-name-span {
  font-size: 30px;
  font-weight: 300;
  color: rgb(66, 66, 66);
}


.category-tip-span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #401818a1;
}

.category-add-tip-span {
  display: block;
  font-weight: 500;
  font-size: 30px;
  color: #401818a1;
}

.category-num-span {
  display: block;
  font-weight: 500;
  font-size: 18px;
  color: rgb(66, 66, 66);
}
</style>